﻿@page "/auto-fill"
@inject IStringLocalizer<AutoFills> Localizer
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption

<h3>@Localizer["Title"]</h3>
<h4>@Localizer["Description"]</h4>

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <section ignore>
        @((MarkupString)@Localizer["NormalDesc"].Value)
    </section>
    <AutoFill @bind-Value="Model1" Items="Items1" IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
        <ItemTemplate>
            <div class="d-flex">
                <div>
                    <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </ItemTemplate>
    </AutoFill>
    <section ignore>
        <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(Model1.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
        <EditorForm Model="@Model1" RowType="RowType.Inline" ItemsPerRow="2" />
    </section>
</DemoBlock>

<DemoBlock Title="@Localizer["CustomFilterTitle"]" Introduction="@Localizer["CustomFilterIntro"]" Name="CustomFilter">
    <section ignore>@((MarkupString)Localizer["CustomFilterDesc"].Value)</section>
    <AutoFill @bind-Value="Model2" Items="Items2" OnCustomFilter="OnCustomFilter"
              OnGetDisplayText="OnGetDisplayText" class="mb-3">
        <ItemTemplate>
            <div class="d-flex">
                <div>
                    <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </ItemTemplate>
    </AutoFill>
    <section ignore>
        <EditorForm Model="@Model2" RowType="RowType.Inline" ItemsPerRow="2" />
    </section>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowDropdownListOnFocusTitle"]" Introduction="@Localizer["ShowDropdownListOnFocusIntro"]" Name="ShowDropdownListOnFocus">
    <section ignore>
        @((MarkupString)@Localizer["ShowDropdownListOnFocusDesc"].Value)
    </section>
    <AutoFill @bind-Value="Model3" Items="Items3" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText" class="mb-3">
        <ItemTemplate>
            <div class="d-flex">
                <div>
                    <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </ItemTemplate>
    </AutoFill>
    <section ignore>
        <EditorForm Model="@Model3" RowType="RowType.Inline" ItemsPerRow="2" />
    </section>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
